<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <ng-template #currency>
      <app-currency-select formControlName="currency"></app-currency-select>
    </ng-template>

    <div nz-row [nzGutter]="24">
      <ng-container *ngFor="let item of formItems">
        <div nz-col [nzSpan]="12" style="min-height: 0;">
          <!-- 自定义模板 -->
          <nz-form-item *ngIf="item.type === formItemType.TEMPLATE">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <app-currency-select formControlName="currency"></app-currency-select>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required')">{{
                  item.errTips['required']
                }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <!-- 多选框 -->
          <nz-form-item *ngIf="item.type === formItemType.SELECT && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <nz-select
                [nzDisabled]="item.disable"
                [compareWith]="item.compareFn"
                [nzMode]="item.multiple"
                [formControlName]="item.formControlName"
                [nzAllowClear]="item.allowClear"
                name="item.formControlName"
                (ngModelChange)="item.change && item.change($event)"
              >
                <nz-option *ngFor="let op of item.options" [nzLabel]="op.label" [nzValue]="op.value"></nz-option>
              </nz-select>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required')">{{
                  item.errTips['required']
                }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <!-- switch 开关-->
          <nz-form-item *ngIf="item.type === formItemType.SWITCH && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <nz-switch
                [nzDisabled]="item.disable"
                [formControlName]="item.formControlName"
                (ngModelChange)="item.change($event)"
              ></nz-switch>
            </nz-form-control>
          </nz-form-item>

          <!-- 文件上传 -->
          <nz-form-item *ngIf="item.type === formItemType.FILE && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <app-new-upload-file
                [disable]="item.disable"
                [(content)]="validateForm.get(item.formControlName).value"
              ></app-new-upload-file>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container>{{ item.errTip }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <!-- input -->
          <nz-form-item *ngIf="!item.type && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <input
                nz-input
                [attr.disabled]="item.disable"
                [type]="item.inputType"
                [formControlName]="item.formControlName"
                [name]="item.formControlName"
                (input)="item.change ? item.change($event) : null"
              />
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required'); else second">{{
                  item.errTips['required']
                }}</ng-container>
                <ng-template #second>
                  <ng-container *ngIf="validateForm.get(item.formControlName).hasError('min'); else third">{{
                    item.errTips['min']
                  }}</ng-container>
                </ng-template>
                <ng-template #third>
                  <ng-container *ngIf="validateForm.get(item.formControlName).hasError('max'); else fourth">{{
                    item.errTips['max']
                  }}</ng-container>
                </ng-template>
                <ng-template #fourth>
                  <ng-container *ngIf="validateForm.get(item.formControlName).hasError('maxlength'); else five"
                    >{{ item.errTips['maxlength'] }}
                  </ng-container>
                </ng-template>
                <ng-template #five>
                  <ng-container *ngIf="validateForm.get(item.formControlName).hasError('pattern')"
                    >{{ item.errTips['pattern'] }}
                  </ng-container>
                </ng-template>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </ng-container>
    </div>
  </form>
</div>
